<template>
  <div class="userSelect">
    <el-input
      :value="selectData.userName"
      :placeholder="placeholder"
      :clearable="clearable"
      :disabled="disabled"
      :multiple="multiple"
      :multiple-limit="multipleLimit"
      readonly
      :class="clearable && value ? 'noBorder' : ''"
      @click.native="openTable"
      @change="$emit('change',selectData.userId)"
      @input="$emit('input', selectData.userId)"
    >
      <span v-if="clearable && value" slot="append" style="width: 20%" class="el-icon-circle-close" @click.stop="clear" />
    </el-input>

    <!-- 添加或修改用户信息对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="tableOpen" :close-on-click-modal="false" :show-close="true" :before-close="close" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <user-table ref="userTable" :multiple="multiple" :multiple-limit="multipleLimit" @change="onChange" />
    </el-dialog>
  </div>
</template>

<script>
import props from './mixin'
import UserTable from './table'
import { findInUser, getUser } from '@/api/system/user'
export default {
  name: 'Index',
  components: {
    UserTable
  },
  props: {
    ...props
  },
  data() {
    return {
      tableOpen: false,
      title: '选择人员',
      selectData: {
        userId: '',
        userName: ''
      },
      selectUserList: []
    }
  },
  watch: {
    value: {
      handler(sval) {
        if (sval) {
          var userName = ''
          if (sval.constructor === Array || sval instanceof Array) {
            userName = sval.join(', ')
          } else {
            userName = sval
          }
          this.selectData = {
            userId: sval,
            userName: userName
          }
          if (!this.multiple && sval) {
            this.getUserInfo(sval).then(res => {
              this.selectData = {
                userId: res.id,
                userName: res.nickName
              }
              res.checked = true
              this.selectUserList = [res]
            })
          } else {
            var userIds = []
            var userNames = []
            if (sval) {
              findInUser(sval).then(res => {
                res.rows.forEach(user => {
                  user.checked = true
                  userIds.push(user.id)
                  if (user.nickName) {
                    userNames.push(user.nickName)
                  } else {
                    userNames.push(user.id)
                  }
                })
                this.selectUserList = res.rows
                this.selectData = {
                  userId: userIds,
                  userName: userNames.join(', ')
                }
              })
            }
          }
        } else {
          this.selectData = {
            userId: sval,
            userName: sval
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    openTable() {
      if (this.disabled) return
      this.tableOpen = true
      var selectUserList = JSON.parse(JSON.stringify(this.selectUserList))
      this.$nextTick(() => {
        this.$refs.userTable.getList(selectUserList)
      })
    },
    close() {
      this.$refs.userTable.reset()
      this.tableOpen = false
    },
    clear() {
      this.selectData = {
        userId: '',
        userName: ''
      }
      this.selectUserList = []
      this.$emit('change', undefined)
      this.$emit('input', undefined)
    },
    onChange(e) {
      if (!this.multiple) {
        this.getUserInfo(e).then(res => {
          this.selectData.userId = res.id
          this.selectData.userName = res.nickName
          this.$emit('change', res.id)
          this.$emit('input', res.id)
        })
      } else {
        var users = JSON.parse(JSON.stringify(e))
        var userIds = []
        var userNames = []
        this.selectUserList = []
        users.forEach(user => {
          if (user.checked) {
            this.selectUserList.push(user)
            userIds.push(user.id)
            if (user.nickName) {
              userNames.push(user.nickName)
            } else {
              userNames.push(user.id)
            }
          }
        })
        if (userIds.length === 0) {
          this.selectData = {
            userId: [],
            userName: ''
          }
        } else if (userNames.length === 0) {
          this.selectData = {
            userId: userIds,
            userName: userIds.join(', ')
          }
        } else {
          this.selectData = {
            userId: userIds,
            userName: userNames.join(', ')
          }
        }
        this.$emit('change', this.selectData.userId)
        this.$emit('input', this.selectData.userId)
      }
    },
    getUserInfo(userId) {
      return new Promise((res, rej) => {
        getUser(userId).then(resu => {
          res(resu.data)
        }).catch((e) => {
          rej(e)
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.userSelect /deep/ .noBorder .el-input__inner {
  border-right: none !important;
}
.userSelect /deep/ .el-input {
  //cursor: pointer;
  input {
    cursor: pointer;
    outline: 0;
  }
  .el-input-group__append {
    padding: 0 5px;
    cursor: pointer;
    background-color: #fff;
  }
  .el-input__inner:focus {
    border-color: #dcdfe6 !important;
  }
  //边框本身的颜色
  .el-input__inner {
    border: 1px solid #dcdfe6;
  }
  .el-input__inner:hover {
    border-color: #dcdfe6;
  }
}
</style>
